<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bobo</title>
		<link rel="stylesheet" media="screen" href="css/login.css">
		<link rel="stylesheet" media="screen" href="css/index.css">
		<link rel="stylesheet" media="screen" href="css/reset.css">
		<link rel="stylesheet" media="screen" href="css/iconfont.css">
		<link rel="stylesheet" type="text/css" media="screen" href="./css/player.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="./css/tab.css" />
	</head>
	<body>
		<!-- 背景 -->
		<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
			<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
		</div>
		<!-- 内容 -->
		<div class="container">
			<!-- 头部 -->
			<header class="header">
				<a class="logobox" href="#">
					<i class="icon iconfont icon-ai-home logoicon"></i>
					<span class="logo">bobo.com</span>
				</a>
				<div class="search">
					<input type="text" placeholder="输入关键词搜索…" name="" id="" value="" />
					<button><i class="icon iconfont icon-sousuo"></i></button>
				</div>
				<!-- 头部右边 -->
				<ul class="header_fr">
					<li class="header_fr_li">
						<!-- 播放器 -->
						<div class="music-player">
							<!-- audio标签 -->
							<audio class="music-player__audio"></audio>
							<!-- 播放器主体 -->
							<div class="music-player__main">
								<!-- 唱片 -->
								<div class="music-player__disc">
									<!-- 唱片图片 -->
									<div class="music-player__image">
										<img width="100%" src="" alt="">
									</div>
								</div>
								<!-- 控件主体 -->
								<div class="music-player__controls">
									<!-- 歌曲信息 -->
									<div class="music__info">
										<h3 class="music__info--title">...</h3>
									</div>
									<!-- 控件... -->
									<div class="player-control">
										<div class="player-control__content">
											<div class="player-control__btns">
												<div class="player-control__btn player-control__btn--prev"><i class="icon iconfont icon-shangyishou_huaban"></i></div>
												<div class="player-control__btn player-control__btn--play"><i class="icon iconfont icon-iconset0481"></i></div>
												<div class="player-control__btn player-control__btn--next"><i class="icon iconfont icon-xiayishou_huaban"></i></div>
												<div class="player-control__btn player-control__btn--mode"><i class="icon iconfont icon-ziyuan"></i></div>
											</div>
											<div class="player-control__volume">
												<div class="control__volume--icon player-control__btn"><i class="icon iconfont icon-shengyin"></i></div>
											</div>
										</div>
										<!-- 歌曲播放进度 -->
										<div class="player-control__content">
											<div class="player__song--progress progress"></div>
										</div>
									</div>
								</div>
							</div>

							<!-- 歌曲列表 -->
							<div class="music-player__list">
								<ul class="music__list_content"></ul>
							</div>
						</div>
					</li>

					<!-- 歌曲列表按钮 -->
					<li class="header_fr_li">
						<div class="songslistbtn">
							<i class="icon iconfont icon-liebiao"></i>
						</div>
					</li>

					<!-- 说说按钮 -->
					<li class="header_fr_li">
						<div class="gossipbtn">
							<i class="icon iconfont icon-xinxi"></i>
						</div>
						<ul class="gossip">
							<h3>闲言碎语</h3>
							<li class="gossip_item">
								<a href="#">
									<div class="gossip_title">
										js如何写html页面 - 百度知道
									</div>
									<div class="gossip_date">2020-09-20 20:27</div>
								</a>
							</li>
							<li class="gossip_item">
								<a href="#">
									<div class="gossip_title">
										js如何写html页面 - 百度知道
									</div>
									<div class="gossip_date">2020-09-20 20:27</div>
								</a>
							</li>
							<li class="gossip_item">
								<a href="#">
									<div class="gossip_title">
										js如何写html页面 - 百度知道
									</div>
									<div class="gossip_date">2020-09-20 20:27</div>
								</a>
							</li>
						</ul>
					</li>

					<!-- 皮肤按钮 -->
					<li class="header_fr_li">
						<div class="skinbtn">
							<i class="icon iconfont icon-yueliang"></i>
						</div>
					</li>

					<!-- 登录按钮 -->
					<li class="header_fr_li">
						<div class="keybtn">
							<i class="icon iconfont icon-yuechi"></i>
							<i class="icon iconfont icon-sanjiao"></i>
						</div>
						<ul class="keybox">
							<li>
								<div class="key_name">用户名</div>
								<input class="key_input" type="text" placeholder="用户名或电子邮箱" />
							</li>
							<li>
								<div class="key_name">密码</div>
								<input class="key_input" type="text" placeholder="密码" />
							</li>

							<li>
								<input class="loginkeybtn" type="submit" value="登录" />
							</li>
						</ul>
					</li>
				</ul>


			</header>
			<!-- 左边 -->
			<div class="leftbox">
				<div class="leftbox_header">
					<img src="images/pp.jpg">
					<div class="leftbox_header_name">终究只是过客<i class="icon iconfont icon-sanjiao"></i></div>
					<div class="leftbox_header_triangle"></div>
					<div class="leftbox_header_namebox">
						晚上好，注意早点休息！
					</div>
				</div>
				<div class="leftbox_nav">
					<ul class="nav_ul">
						<li class="nLi">
							<h3>导航</h3>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-ai-home"></i>
								<span>首页</span>
							</a>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-guidang"></i>
								<span>归档</span>
							</a>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-icon-test"></i>
								<span>留言</span>
							</a>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-tupian"></i>
								<span>相册</span>
							</a>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-lianjie"></i>
								<span>链接</span>
							</a>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-44"></i>
								<span>笔记</span>
							</a>
						</li>
					</ul>
					<ul class="nav_ul">
						<li class="nLi">
							<h3>组成</h3>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-leimupinleifenleileibie"></i>
								<span>分类</span>
								<i class="icon iconfont icon-right right_icon"></i>
							</a>
							<ul class="sub">
								<li><a href="">技能学习</a></li>
								<li><a href="">生活随笔</a></li>
								<li><a href="">旅行相册</a></li>
							</ul>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-yemian"></i>
								<span>页面</span>
								<i class="icon iconfont icon-right right_icon"></i>
							</a>
							<ul class="sub">
								<li><a href="">时光机</a></li>
								<li><a href="">留言板</a></li>
							</ul>
						</li>
						<li class="nLi">
							<a href="#">
								<i class="icon iconfont icon-lianjie"></i>
								<span>友链</span>
								<i class="icon iconfont icon-right right_icon"></i>
							</a>
							<ul class="sub">
								<li><a href="">杨青博客</a></li>
								<li><a href="">硅云</a></li>
								<li><a href="">Python教程</a></li>
								<li><a href="">Easy Blog</a></li>
								<li><a href="">十年之约</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!-- 右边 -->
			<div class="rightbox">
				<!-- 中心内容 -->
				<div class="center_part">
					<div class="rightbox_header">
						<h3>终究只是过客</h3>
						<h4>真正走掉那次，关门声最小。</h4>
					</div>
					<div class="blog_post">
						<div class="blog_post_item">
							<h2><a href="#">关于用户画像 - 它可能比你还了解你自己</a></h2>
							<p>最近身边发生了不少事情，有好的也有不好的。今年因为疫情关系国家甚至全球的经济走势和政策也发生了不少改变，年初因为刚需选择在这个节点买了房，也不知道是好还是坏。作为众多普通人中的一员，我无力改变这个世界的现状，我只能选择去适应当前的大环境。身处在这繁杂的世界，每天面对着各种各样的信息，我们都是有选择性的浏览。现在知乎啊头条啊抖音什么的，获取信息的平台特别多，各大平台都是根据我们的浏览记录分析我...</p>
							<div class="blog_post_item_footer">
								<ul>
									<li>
										<span class="icon iconfont icon-ren-"></span>
										<a href="#">终究只是过客</a>
									</li>
									<li>
										<span class="icon iconfont icon-shijian"></span>
										<a href="#">2020 年 06 月 18 </a>
									</li>
									<li>
										<span class="icon iconfont icon-xinxi"></span>
										<a href="#">5 条评论</a>
									</li>
								</ul>
							</div>
						</div>

						<div class="blog_post_item">
							<h2><a href="#">关于用户画像 - 它可能比你还了解你自己</a></h2>
							<p>最近身边发生了不少事情，有好的也有不好的。今年因为疫情关系国家甚至全球的经济走势和政策也发生了不少改变，年初因为刚需选择在这个节点买了房，也不知道是好还是坏。作为众多普通人中的一员，我无力改变这个世界的现状，我只能选择去适应当前的大环境。身处在这繁杂的世界，每天面对着各种各样的信息，我们都是有选择性的浏览。现在知乎啊头条啊抖音什么的，获取信息的平台特别多，各大平台都是根据我们的浏览记录分析我...</p>
							<div class="blog_post_item_footer">
								<ul>
									<li>
										<span class="icon iconfont icon-ren-"></span>
										<a href="#">终究只是过客</a>
									</li>
									<li>
										<span class="icon iconfont icon-shijian"></span>
										<a href="#">2020 年 06 月 18 </a>
									</li>
									<li>
										<span class="icon iconfont icon-xinxi"></span>
										<a href="#">5 条评论</a>
									</li>
								</ul>
							</div>
						</div>

						<div class="blog_post_item">
							<h2><a href="#">关于用户画像 - 它可能比你还了解你自己</a></h2>
							<p>最近身边发生了不少事情，有好的也有不好的。今年因为疫情关系国家甚至全球的经济走势和政策也发生了不少改变，年初因为刚需选择在这个节点买了房，也不知道是好还是坏。作为众多普通人中的一员，我无力改变这个世界的现状，我只能选择去适应当前的大环境。身处在这繁杂的世界，每天面对着各种各样的信息，我们都是有选择性的浏览。现在知乎啊头条啊抖音什么的，获取信息的平台特别多，各大平台都是根据我们的浏览记录分析我...</p>
							<div class="blog_post_item_footer">
								<ul>
									<li>
										<span class="icon iconfont icon-ren-"></span>
										<a href="#">终究只是过客</a>
									</li>
									<li>
										<span class="icon iconfont icon-shijian"></span>
										<a href="#">2020 年 06 月 18 </a>
									</li>
									<li>
										<span class="icon iconfont icon-xinxi"></span>
										<a href="#">5 条评论</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- 侧边栏 -->
				<div class="sidebar">
					<ul class="ul_tab">
						<li class="ul_tab_li">
							<input class="ul_tab_li_input" type="radio" name="check" id="active1" checked><label class="icon iconfont icon-dianzan label"
							 for="active1"></label>
							<div class="div">
								<ul class="ul_tab_ul_con">
									<h3>热门文章</h3>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录1</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录2</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录3</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录4</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录5</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="ul_tab_li">
							<input class="ul_tab_li_input" type="radio" name="check" id="active2"><label class="icon iconfont icon-xinxi label"
							 for="active2"></label>
							<div class="div">
								<ul class="ul_tab_ul_con">
									<h3>热门文章</h3>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录1</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录2</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录3</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录4</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录5</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
								</ul>

							</div>
						</li>
						<li class="ul_tab_li">
							<input class="ul_tab_li_input" type="radio" name="check" id="active3"><label class="icon iconfont icon-icon_liwu_w label"
							 for="active3"></label>
							<div class="div">
								<ul class="ul_tab_ul_con">
									<h3>热门文章</h3>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录1</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录2</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录3</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录4</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="images/p.jpg">
											<div class="ul_tab_ul_con_item">
												<div class="ul_tab_ul_con_item_title">记一次事务失效的问题排查记录5</div>
												<div class="dd">
													<span class="icon iconfont icon-xinxi"></span>
													<span>21</span>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>




		<script src="./js/utill.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="./js/player.js"></script>
		<!-- scripts -->
		<script src="js/login.js"></script>
		<script src="js/loginApp.js"></script>
		<script>
			// 获取浏览器高度
			$(function() {
				$(document).ready(function() {
					var winHeight = $(window).height() - 50; //winHeight即浏览器高度
					$(".leftbox,.rightbox").css({
						"height": winHeight
					});
				})
			})

			// 左边滑动—展开隐藏
			$(function() {
				$(".nLi a").click(function() {
					if ($(this).parent(".nLi").hasClass("on")) {
						$(this).next(".sub").slideUp(300, function() {
							$(this).parent(".nLi").removeClass("on")
						});
					} else {
						$(this).next(".sub").slideDown(300, function() {
							$(this).parent(".nLi").addClass("on")
						});
					}
				})
			})


			function changeImg() {
				let pic = document.getElementById('picture');
				console.log(pic.src)
				if (pic.getAttribute("src", 2) == "img/check.png") {
					pic.src = "img/checked.png"
				} else {
					pic.src = "img/check.png"
				}
			}
		</script>
	</body>
</html>
